<template>
    <div>
        <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#icon-${name}`"></use>
        </svg>
    </div>
</template>

<script setup lang="ts">
defineProps({
    name: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '16px'
    },
    height: {
        type: String,
        default: '16px'
    }
})
</script>

<style lang="scss" scoped>
.icon {
    width: v-bind(width);
    height: v-bind(height);
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>
